<template>
  <div class="doctorList">
    <div class="filter-bar">
      <el-row :gutter="10">
        <el-col :span="4">
          <el-input
            placeholder="医生名称"
            v-model="doctorName"
            class="input-with-select"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="department" placeholder="请选择">
            <el-option
              v-for="item in departmentList"
              :key="item.d_id"
              :label="item.d_name"
              :value="item.d_name"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="handleKeywordFilter"
            >搜索</el-button
          >
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="set">添加医生</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table">
      <el-table :data="tableData" height="438" v-loading="loading" stripe>
        <el-table-column label="编号" type="index" :index="indexMethod">
        </el-table-column>
        <el-table-column label="医生名称" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.doc_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="医生编号">
          <template slot-scope="scope">
            <span>{{ scope.row.doc_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所在科室">
          <template slot-scope="scope">
            <span>{{ scope.row.doc_department }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="set(scope.row)">编辑详情</el-button>
            <el-button type="text" @click="deleteDepart(scope.row.doc_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        @current-change="getDepartmentListByPage"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        >>
      </el-pagination>
    </div>

    <div class="popup">
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>是否确定放弃本次操作？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">我再想想</el-button>
          <el-button type="primary" @click="deleteTrue">确定删除</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { doctorListGet, doctorDelete } from "../../api/doctor";
import { departmentListGet } from "../../api/department";
export default {
  name: "list",
  data() {
    return {
      loading: false,
      doctorName: "",
      department: "",
      tableData: [{}],
      pageIndex: 1, //默认显示第一页
      pageSize: 6, //每页显示
      total: 0,
      dialogVisible: false,
      deleteId: "",
      departmentList: [],
    };
  },

  created() {
    this.init();
  },

  mounted() {},

  methods: {
    init() {
      this.getList();
      departmentListGet({
        pageIndex: 1,
        pageSize: 1000,
        d_hospital:sessionStorage.getItem('hospitalId')
      }).then((res) => {
        console.log(res);
        res.list.unshift({d_name:'全部'})
        this.departmentList = res.list;
      });
    },
    async getList() {
      try {
        let res = await doctorListGet({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          doctorName: this.doctorName,
          department: this.department == '全部' ? '':this.department,
          doc_hospital:sessionStorage.getItem('hospitalId')
        });
        console.log(res, "医生信息");
        this.tableData = res.list;
        this.total = res.total;
      } catch (e) {
        console.error(e);
      }
    },
    handleKeywordFilter() {
      this.getList();
    },
    indexMethod(index) {
      return index + (this.pageIndex - 1) * this.pageSize + 1;
    },
    getDepartmentListByPage() {
      this.getList();
    },
    set(row) {
      if (row) {
        this.$router.push({
          path: "/doctorManage/update",
          query: {
            id: row.doc_id,
          },
        });
      } else {
        this.$router.push("/doctorManage/add");
      }
    },
    deleteDepart(id) {
      this.dialogVisible = true;
      this.deleteId = id;
    },
    async deleteTrue() {
      this.dialogVisible = false;
      let res = await doctorDelete({
        doc_id: this.deleteId,
        doc_hospital:sessionStorage.getItem('hospitalId')
      });
      if (res) {
        this.$message.success(res.msg);
        this.pageIndex = 1;
        this.getList();
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.doctorList {
  height: 100%;
  position: relative;
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  margin: 0 20px 0 20px;
  .filter-bar {
    width: 100%;
    margin-bottom: 10px;
    .el-row {
      .el-col {
        > div {
          width: 100%;
        }
      }
      .el-col-5 {
        max-width: 180px;
      }
      .el-col-9 {
        max-width: 440px;
      }
    }
  }
  .table {
    margin-top: 20px;
    height: auto;
    .el-table {
      width: 100%;
      height: 100%;
      margin-top: 10px;
      font-size: 14px;
      /*min-height: calc(100% - 88px);*/
    }
  }
  .page {
    margin-top: 20px;
    .el-pagination {
      text-align: center;
    }
  }
}
</style>